<template>
    <div id="CarbonTrading">
        
        <div class="top_content">
            <div class="title">
                <h1>碳交易</h1>
                <p>Carbon Trading</p>
            </div>
        </div>
        
        <div class="mid_content clearfix">
            <div class="titleBG">政府碳交易</div>
            <div class="content">
                <el-image :src="url1" :preview-src-list="srcList" :initial-index="0" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/jiaoyi.jpg" alt=""> -->
            </div>
            <div class="titleBG">企业碳交易</div>
            <div class="content">
                <el-image :src="url2" :preview-src-list="srcList" :initial-index="1" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/qiyejiaoyi.png" alt=""> -->
            </div>
            <div class="titleBG">个人碳交易</div>
            <div class="content">
                <el-image :src="url3" :preview-src-list="srcList" :initial-index="2" fit="cover"  hide-on-click-modal="true"/>
                <!-- <img src="../../assets/tanbi.png" alt=""> -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
  data() {
    return {
        
        url1:require('../../assets/jiaoyi.png'),
        url2:require('../../assets/qiyejiaoyi.png'),
        url3:require('../../assets/tanbi.png'),
        srcList:[require('../../assets/jiaoyi.png'),
                require('../../assets/qiyejiaoyi.png'),
                require('../../assets/tanbi.png'),]
    }
  },
  methods:{
    load(){

    },
    toDetail(index){
      this.$router.push({path:'articleRead',query:{back:'/'}});
    },
    
  },
  mounted() {
    window.scrollTo(0,0);
    },
}
</script>


<style scoped>
#AboutUs{
    position: relative;
}
.top_content{
    width:100%;
    height:480px;
    background: url("../../assets/a.png");
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;

}
.top_content .title{
    margin-top: 60px;
    color: #333;
}
.mid_content{
    width: 1080px;
    position:relative;
    left: 50%;
    margin-left:-540px;
    top:-300px;
    min-height: 600px;
    -webkit-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    -moz-box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    box-shadow: 0 11px 24px rgba(0, 17, 54, 0.58);
    background: #ffffff;
    padding: 30px 40px;
    box-sizing: border-box;
}
.mid_content_left{
    width: 30%;
    float: left;
}
.mid_content_right{
    width: 70%;
    float: left;
}
.leftTitle{
    line-height: 40px;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    margin-bottom:20px;
}

ul{
    list-style: none;

}
.normalLi{
    padding: 10px 20px;
    border: 1px solid #efefef;
    border-radius: 4px;
    color:#666;
    font-size: 14px;
    margin-left: 10px;
    margin-block: 10px;
    float: left;
    width: auto;
}
.nowsli{
    background: #333;
    color:#fff;
}
.normalLi:hover{
    cursor: pointer;
}
#myChart1,#myChart2{
    float: left;
    width:500px;
    height:300px;
}
.titleBG{
    width: 100px;
    height: 60px;
    background:url('../../assets/bgtitle.png');
    background-size: cover !important;
    background-repeat: round !important;
    text-align: center;
    overflow:hidden;
    line-height: 80px;
    color:#666;
}
.content{
    width:100%;
    text-align: center;
}
.content img{
    margin:auto;
}
</style>